<template>
	<view class="content">
		<view class="top">
			<image :src="activity.pic" class="img"></image>
			<view class="top_right">
				<view class="title">{{activity.title}}</view>
				<view class="top_right_bottom">
					<view class="beginTime text">{{activity.beginTime}}</view>
					<view class="currentPeople text">{{activity.currentPeople}}/{{activity.totalPeople}}人</view>
					<!-- <view class="totalPeople text">目标人数{{activity.totalPeople}}人</view> -->
				</view>
			</view>
		</view>
		<view class="description">
			{{activity.description}}
		</view>
		<view class="address">
			活动地址：{{activity.address}}
		</view>
		<view class="principal">
			<view class="principal_top">
				<view class="principalName">联系人: {{activity.principalName}}</view>
				<view class="gender">
					性别: {{activity.gender}}
				</view>
			</view>
			<view class="principal_middle">
				<view class="phone">联系方式: {{activity.phone}}</view>
				<view class="wechat">微信: {{activity.wechat}}</view>
			</view>
			<view class="principal_bottom">
				<view class="qq">QQ: {{activity.qq}}</view>
				<view class="email">邮箱: {{activity.email}}</view>
			</view>
		</view>
		<button v-if="activity.join === true" class="btn" @click="exitActivity()">退出</button>
		<button v-if="activity.join === false" class="btn" @click="joinActivity()">参加</button>
		<!-- <button  class="btn" @click="joinActivity()">参加</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recentActivity: '所有活动',
				historyActivity: "历史活动",
				activity: null,
				activityId: 0,
				userId: null,
				isJoin: true,
				principalId: 0,
			}
		},
		onLoad(option) {
			console.log(option);
			//this.setUserId();
			this.userId = option.userId;
			this.activityId = option.activityId;
			this.principalId = option.principalId;
			this.isJoin = option.isJoin;
			//this.isJoinActivity(option.activityId);
			//this.findActivityById(this.activityId, this.principalId);
			this.findActivityById(this.activityId, this.principalId,this.userId);
			
		},
		onReady() {
			//await this.isJoinActivity(this.activityId);
			//this.isJoinActivity(this.activityId);
			
		},	
		methods: {
			async isJoinActivity(activityId){
				const res = await this.$myRequest({
					url:'/userActivity/isJoinActivity?activityId='+activityId+'&userId='+this.userId,
					method:"post",
				});
				console.log("isJoinActivity 结果",res);
				this.isJoin = res.data.data;
				console.log("isJoin",this.isJoin);
				//return res.data.data;
			},
			
			findActivityById(activityId, principalId,userId) {
				uni.request({
					header: {
						'content-type': 'application/json', //如果后台使用 @Reuqestbody的，使用这种方式
					},
					url: "http://localhost:8090/activity/findActivityById?activityId=" + activityId + "&principalId=" + principalId + "&userId="+userId,
					method: "POST",
					//dataType: "json",
					timeout: 60000,
					success: res => {
						console.log(res);
						if (res.data.code == 200) {
							this.activity = res.data.data;
						} else {
							uni.showToast({
								title: "找不到该活动",
								icon: "none",
								mask: true,
								position: "top"
							}); 
						}
					}
				})
			},
			
			async setUserId(){
				uni.getStorage({
					key:"userId",
					success: (res) => {
						console.log("获取userId成功",res);
						this.userId = res.data
						console.log("getStorageSync this.userId "+this.userId);
					}
				});
				//return 
				//console.log("设置成功, value =",value);
				console.log("this.userId =",this.userId);
			},
			
			async joinActivity(){
				console.log("点击了参加");
				console.log("joinActivity this.activityId =",this.activityId);
				console.log("joinActivity this.userId =",this.userId);
				const res = await this.$myRequest({
					url:'/activity/joinActivity?activityId='+this.activityId+'&userId='+this.userId,
					//url:'/activity/joinActivity',
					method:"post",
					/* data:{
						activityId: this.activityId,
						userId: this.userId
					} */
					//dataType
				});
				if(res.data.code==200){
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						mask: true,
						position: "top"
					});
				}
				this.findActivityById(this.activityId, this.principalId,this.userId);
			},
			
			async exitActivity(){
				console.log("点击退出活动");
				const res = await this.$myRequest({
					url:'/activity/exitActivity?activityId='+this.activityId+'&userId='+this.userId,
					method:"post",
				});
				if(res.data.code==200){
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						mask: true,
						position: "top"
					});
				}
				await this.findActivityById(this.activityId, this.principalId,this.userId);
			}
		},
		components: {

		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		.top {
			display: flex;
			justify-content: left;
			margin: 10rpx 10rpx;
			.img{
				width: 150rpx;
				height: 150rpx;
			}
			.top_right{
				
				display: flex;
				flex-direction: column;
				justify-content: left;
				justify-content: space-around;
				align-items: center;
				.title{
					font-weight: bolder;
				}
				.top_right_bottom{
					margin-left: 16rpx;
				}
				.text{
					font-size: 24rpx;
					
				}
			}
		}
		
		.description {
			font-size: 27rpx;
			margin: 5rpx 10rpx;
			height: 450rpx;
		}
		
		.address {
			font-size: 27rpx;
			margin: 5rpx 10rpx;
		}
		
		.principal {
			font-size: 27rpx;
			margin: 5rpx 10rpx;
			.principal_top{
				display: flex;
				flex-direction: row;
				.principalName{
					width: 50%;
				}
				.gender{
					width: 50%;
				}
			}
			.principal_middle{
				display: flex;
				flex-direction: row;
				.phone{
					width: 50%;
				}
				.wechat{
					width: 50%;
				}
			}
			.principal_bottom{
				display: flex;
				flex-direction: row;
				.qq{
					width: 50%;
				}
				.email{
					width: 50%;
				}
			}
		}
		
		.btn {
			width: 720rpx;
			font-size: 30rpx;
			text-align: center;
			border: none;
			background-color: #007AFF;
			color: #FFFFFF;
			//color: #4CD964;
			line-height: 70rpx;
			border-radius: 30px;
		}
	}

	
</style>
